<template>
	<div>
		<el-container>
			<el-header>
				<el-row :gutter="20">
					<el-col style="cursor: pointer;" :span="1">
						<span style='margin-top: 10px;display: block;'></span>
						<u-icon @click='setting_drawer' name="setting" color="#000" size="25"></u-icon>
					</el-col>
				  <el-col :offset="5" :span="1"><el-button  @click='tts'  type="success">语音合成</el-button></el-col>
				  <el-col :span="7">
					  <div :class='dir'>
						  <el-input @input="blur" :placeholder="placeholder" v-model="search" :class="cls" class="input-with-select">
						   <el-select @change="change" v-model="search_select" slot="prepend" placeholder="请选择">
								<el-option label="中文搜索" value="1"></el-option>
								<el-option label="维文搜索" value="2"></el-option>
							</el-select>
						    <el-button @click='search_start' slot="append" icon="el-icon-search"></el-button>
						  </el-input>
					  </div>
				  </el-col>
				  <el-col :span="1"><el-button  @click='add'  type="primary">新建</el-button></el-col>
				</el-row>
			</el-header>
			<el-main>
			  <el-table :data="articleData" border style="margin: auto!important;" @selection-change="handleSelectionChange">
			     <el-table-column
			          type="selection"
			          width="55">
			        </el-table-column>
			    </el-table-column>
				<el-table-column className='al-left' prop="cn_text" label="中文">
					<template slot-scope="scope">
						<p :style='"font-size:"+fs+"px"'>{{ scope.row.cn_text }}</p>
					</template>
				</el-table-column>
				<el-table-column className='al-right uy' prop="uy_text" label="ئۇيغۇرچە">
					<template slot-scope="scope">
						<p :style='"font-size:"+fs+"px"' class='rtl uy'>{{ scope.row.uy_text }}</p>
					</template> 
				</el-table-column>
				<el-table-column width="200" className='ltr' align='center' prop="add_time"label="添加时间"></el-table-column>
				<el-table-column width="200" className='ltr' align='center' prop="update_time"label="更新时间"></el-table-column>
				<el-table-column className='al-center'
					  fixed="right"
					  label="操作"
					  width="200">
					  <template slot-scope="scope">
						  <el-button plain size="mini" @click.native.prevent="edit(scope.$index, articleData)" type="success">编辑</el-button>
						  <el-button plain size="mini" @click.native.prevent="del(scope.$index, articleData)" type="danger">删除</el-button>
					  </template>
				</el-table-column>
			  </el-table>
			</el-main>
			<el-footer>
				<el-row>
					<el-col :span="1">
						<el-button @click='del_all' type="danger" plain>批量删除</el-button>
					</el-col>
				  <el-col :offset="9" :span="14">
					  <el-pagination v-if="count > limit"
					    @current-change='current_change' background
					    :page-size="limit"
					    layout='prev, pager, next, total'
					    prev-text="上一页"
					    next-text="下一页"
					    :total="count">
					  </el-pagination>
				  </el-col>
				</el-row>
			</el-footer>
		</el-container>
		
		<el-container>
		  <el-drawer size='80%' title="添加内容" :visible.sync="drawer" direction="rtl">
		    <el-form style='margin-right: 30px;' label-width="100px" class="demo-ruleForm">
		      <el-form-item label="中文" prop="desc">
		        <el-input rows='8' :style='"font-size:"+fs+"px"' placeholder="中文" style="direction: ltr;" type="textarea" v-model="form.cn_text"></el-input>
		      </el-form-item>
			  <div class="uy">
				  <el-form-item label="ئۇيغۇرچە" prop="desc">
					<el-input rows='8' :style='"font-size:"+fs+"px"' placeholder="ئۇيغۇرچە" style="direction: rtl;" type="textarea" v-model="form.uy_text"></el-input>
				  </el-form-item>
			  </div>
			  <div class='elemeter'>
				  <div class='item'>
				  	<el-form-item>
				  		<p style='text-align: right;width: 300px;'>中文</p>
				  	</el-form-item>	 
				  	<el-form-item>
				  		<p style='text-align: right;width: 300px;'>维吾尔文</p>
				  	</el-form-item>	 
				  </div>
				<div class='item'>
					<el-form-item>
						<el-input :style='"font-size:"+fs+"px"' v-model="elemeter.cn1"></el-input>
					</el-form-item>	 
					<el-form-item>
						<el-input :style='"font-size:"+fs+"px"' v-model="elemeter.uy1"></el-input>
					</el-form-item>	
					<el-form-item>
						<el-checkbox-group v-model="elemeter.st1">
						    <el-checkbox label="启用" name="ok"></el-checkbox>
						</el-checkbox-group>
					</el-form-item>	
				</div>
				<div class='item'>
					<el-form-item>
						<el-input :style='"font-size:"+fs+"px"' v-model="elemeter.cn2"></el-input>
					</el-form-item>	 
					<el-form-item>
						<el-input :style='"font-size:"+fs+"px"' v-model="elemeter.uy2"></el-input>
					</el-form-item>	 
					<el-form-item>
						<el-checkbox-group v-model="elemeter.st2">
						    <el-checkbox label="启用" name="ok"></el-checkbox>
						</el-checkbox-group>
					</el-form-item>	
				</div>
				<div class='item'>
					<el-form-item>
						<el-input :style='"font-size:"+fs+"px"' v-model="elemeter.cn3"></el-input>
					</el-form-item>	 
					<el-form-item>
						<el-input :style='"font-size:"+fs+"px"' v-model="elemeter.uy3"></el-input>
					</el-form-item>	 
					<el-form-item>
						<el-checkbox-group v-model="elemeter.st3">
						    <el-checkbox label="启用" name="ok"></el-checkbox>
						</el-checkbox-group>
					</el-form-item>	
				</div>
				<div class='item'>
					<el-form-item>
						<el-input :style='"font-size:"+fs+"px"' v-model="elemeter.cn4"></el-input>
					</el-form-item>	 
					<el-form-item>
						<el-input :style='"font-size:"+fs+"px"' v-model="elemeter.uy4"></el-input>
					</el-form-item>	 
					<el-form-item>
						<el-checkbox-group v-model="elemeter.st4">
						    <el-checkbox label="启用" name="ok"></el-checkbox>
						</el-checkbox-group>
					</el-form-item>	
				</div>
				<div class='item'>
					<el-form-item>
						<el-input :style='"font-size:"+fs+"px"' v-model="elemeter.cn5"></el-input>
					</el-form-item>	 
					<el-form-item>
						<el-input :style='"font-size:"+fs+"px"' v-model="elemeter.uy5"></el-input>
					</el-form-item>	 
					<el-form-item>
						<el-checkbox-group v-model="elemeter.st5">
						    <el-checkbox label="启用" name="ok"></el-checkbox>
						</el-checkbox-group>
					</el-form-item>	
				</div>
			  </div>
		      <el-form-item>
		  		<el-button v-if="id" type="primary" @click="update()">保存</el-button>
		        <el-button v-else type="primary" @click="submitForm()">确认添加</el-button>
				<el-button style='margin-right: 10px;' v-if="!id" type="success" @click="submitFormSplit()">自动切分</el-button>
		      </el-form-item>
		    </el-form> 
		  </el-drawer>
		</el-container>
		
		
		<!-- 设置 -->
		<el-container>
		  <el-drawer size='20%' title="设置" :visible.sync="setting" direction="ltr">
		    <div style='padding: 30px;'>
				<div class="block">
					<el-row>
					  <span class="demonstration">字体大小</span>
					  <el-slider @change='input_change' :min='13' :max='40' v-model="fs"></el-slider>
					</el-row>
					
					<el-row>
					  <br><br>
					</el-row>
				   <el-row>
				     <el-button @click = 'logout' type="danger" plain>退出系统</el-button>
				   </el-row>
				   <el-row>
				   	<br><br><br><br><br><br><br><br>
				     {{ version }}
				   </el-row>
				 </div>
			</div>
		  </el-drawer>
		</el-container>
		
		
		<el-container>
			<el-dialog :center="true" :before-close="el_dialog_close" title="切分结果" :visible.sync="dialogVisible" width="80%">
				<div class='result_res'>
					<el-row style='margin-bottom: 10px;' v-if="split_cn_text" v-for="(item,index) in split_cn_text" :gutter="10">
						<el-col :span="12"><el-input type="textarea" rows='4' :style='"font-size:"+fs+"px"' v-model="split_cn_text[index]"  class="cn" style="direction: ltr;line-height: 20px;"></el-input></el-col>
						<el-col :span="12"><el-input type="textarea" rows='4' :style='"font-size:"+fs+"px"' v-model="split_uy_text[index]"  class="uy" style="direction: rtl;line-height: 20px;"></el-input></el-col>
					</el-row> 
					<el-row>
						<br>
					  <el-col :offset="10" :span="13" >
						  <el-button @click = 'queren_add' type="primary" plain>确认保存</el-button>
					  </el-col>
					  <el-col :span="1">
					  	<u-icon style='cursor: pointer;' @click='add_item' name="plus-circle-fill" color="#2979ff" size="28"></u-icon>
					  </el-col>
					</el-row>
				</div>
			</el-dialog>
		</el-container>
		
		
		<!-- 设置 -->
		<el-container  v-loading.fullscreen.lock="fullscreenLoading">
		  <el-drawer size='60%' title="内容转换声音" :visible.sync="tts_open" direction="rtl">
		    <div style='padding: 30px;'>
				<el-form style='margin-right: 30px;' label-width="100px" class="demo-ruleForm">
					<el-form-item label="token" prop="desc">
						<div class="cn">
							<el-input :disabled='disabled' placeholder="token" style="direction: ltr;" type="input" v-model="Authorization"></el-input>
						</div>
						<div class="cn">
							<el-input placeholder="host" style="direction: ltr;" type="input" v-model="host"></el-input>
						</div>
					</el-form-item>
					<el-form-item label="ئاۋاز تۈسى">
						<el-radio v-model="tts_gender" label="1" border>男</el-radio>
						<el-radio v-model="tts_gender" label="2" border>女</el-radio>
					</el-form-item>
					<el-form-item label="ئۇيغۇرچە" prop="desc">
						<div class="uy">
							<el-input rows='18' :style='"font-size:"+fs+"px"' placeholder="ئۇيغۇرچە مەزمۇن" style="direction: rtl;" type="textarea" v-model="tts_text"></el-input>
						</div>
					</el-form-item>
					<el-form-item label="ئۇيغۇرچە" prop="desc">
						<el-button @click = 'convert_tts' type="primary" plain>开始转换</el-button>
					</el-form-item>
					
					<div v-if="src" style='margin: 50px 0 10px;'>播放器1</div>
					<el-form-item v-if="src" label="播放器" prop="desc">
						<div style='direction: ltr;'>
							<wxy-audio :autoplay='autoplay' :src="src" :play.sync="audioPlay"></wxy-audio>
						</div>
					</el-form-item>
					<div v-if="src" style='margin: 50px 0 10px;'>播放器2</div>
					<el-form-item v-if="src" label="播放器" prop="desc">
						<div style='direction: ltr;'>
							<tts :url="src"></tts> 
						</div>
					</el-form-item>
				</el-form>
			</div>
		  </el-drawer>
		</el-container>
	</div>
</template>

<script>
	import $ from "@/static/jquery.js"
	const article = uniCloud.importObject('article') //第一步导入云对象
	import axios from 'axios' 
	import { Loading } from 'element-ui';
	export default {
		data() {
			return {
				version:"v:1.0.6",
				id:'',
				articleData: [],
				multipleSelection: [], /*选中的item保存*/
				drawer: false,
				page: 1,
				limit: 20,
				search:'',
				search_select:1,
				serach_cn : '',
				serach_uy : '',
				placeholder:'请输入搜索内容',
				dir:'',
				cls:'al-left',
				count: 0,
				form: {
				    cn_text :'',
				    uy_text :'',
				},
				/*设置*/
				setting:false,
				fs:16,
				/*切分*/
				elemeter:{
					cn1:"。",
					uy1:".",
					st1: true,
					//
					cn2:"！",
					uy2:"!",
					st2: true,
					//
					cn3:"；",
					uy3:"؛",
					st3: true,
					//
					cn4:'：',
					uy4:':',
					st4: true,
					//
					cn5:'……',
					uy5:'...',
					st5: true,
				},
				split_cn_text: [],
				split_uy_text: [],
				dialogVisible: false,
				/************语音合成***************/
				tts_open: false,
				tts_text:'',
				tts_gender: 0  ,// nan1 | nv2
				Authorization:'' || localStorage.getItem('Authorization'),
				disabled:false,
				fullscreenLoading: false,
				src: '' || localStorage.getItem('audio'),
				host:'' || localStorage.getItem('host'),
				audioPlay:false,
				autoplay:false
			}
		},
		watch:{
			cn_elemeter:{
				handler(newValue , oldValue){
					localStorage.setItem('cn_elemeter', newValue)
				}
			},
			uy_elemeter:{
				handler(newValue , oldValue){
					localStorage.setItem('uy_elemeter', newValue)
				}
			},
			Authorization:{
				handler(newValue , oldValue){
					localStorage.setItem('Authorization', newValue)
				}
			},
			src:{
				handler(newValue , oldValue){
					localStorage.setItem('audio', newValue)
				}
			},
			host:{
				handler(newValue , oldValue){
					localStorage.setItem('host', newValue)
				}
			}
		},
		onLoad() {
			this.getCount();
			this.getData();
			if(localStorage.getItem('fs')){
				this.fs = parseFloat(localStorage.getItem('fs'))
			}
			if(this.Authorization){
				this.disabled = true
			}
		},
		methods: {
			convert_tts(){
				if(!this.host){
					this.$message({
					  message: 'host 不能为空',
					  type: 'error'
					});
					return false;
				}
				if(!this.Authorization){
					this.$message({
					  message: 'token 不能为空',
					  type: 'error'
					});
					return false;
				}
				this.fullscreenLoading = true
				axios.defaults.headers.common['Authorization'] = 'Bearer '+ this.Authorization;
				let host = localStorage.getItem('host') ? localStorage.getItem('host') : this.host
				axios.post(host+'/api/v1/text_convert_tts_sync',{
					text : this.tts_text,
					gender: this.tts_gender
				}).then(res =>{
					localStorage.removeItem('audio')
					this.fullscreenLoading = false
					this.src = res.data.data.src
					this.autoplay = true
					this.play(this.src)
				}).catch(err=>{
					this.fullscreenLoading = false
					this.$message({
					  message: err.response.data.message,
					  type: 'error'
					});
				});
			},
			tts(){
				this.tts_open = true;
			},
			add_item(){
				this.split_cn_text = [...this.split_cn_text,'']
				this.split_uy_text = [...this.split_uy_text,'']
			},
			queren_add(){
				let count = 0;
				this.split_cn_text.forEach((item, index)=>{
					if(item){
						count++;
					}
				})/*计算 count*/
				let count2 = 0;
				this.split_cn_text.forEach((item, index)=>{
					let cn = item;
					let uy = this.split_uy_text[index];
					if(cn){
						count2++;
						if(!uy){
							uy = '';
						}
						article.add(cn, uy);
					}
				})
				if(count2  >= count){
					this.dialogVisible = false
					this.close()
					setTimeout(()=>{
						this.getData()
					},300)
				}
			}, 
			submitFormSplit(){
				this.split_cn_text = [];
				this.split_uy_text = [];
				if(!this.form.cn_text){
					this.$message({
					  message: '中文内容不能为空！',
					  type: 'error'
					});
					return false
				}
				if(!this.form.uy_text){
					this.$message({
					  message: '维吾尔文内容不能为空！',
					  type: 'error'
					});
					return false
				}
				////////////////////
				let elemeter = this.elemeter;
				let cn_regx = "/["
				let ug_regx = "/["
				if(elemeter.st1){
					cn_regx += $.trim(elemeter.cn1)+"|"
					ug_regx += $.trim(elemeter.uy1)+"|"
				}/*st1*/
				if(elemeter.st2){
					cn_regx += $.trim(elemeter.cn2)+"|"
					ug_regx += $.trim(elemeter.uy2)+"|"
				}/*st3*/
				if(elemeter.st3){
					cn_regx += $.trim(elemeter.cn3)+"|"
					ug_regx += $.trim(elemeter.uy3)+"|"
				}/*st3*/
				if(elemeter.st4){
					cn_regx += $.trim(elemeter.cn4)+"|"
					ug_regx += $.trim(elemeter.uy4)+"|"
				}/*st3*/
				if(elemeter.st5){
					cn_regx += $.trim(elemeter.cn5)
					ug_regx += $.trim(elemeter.uy5)
				}/*st3*/
				cn_regx += "]/";
				ug_regx += "]/";
				this.split_cn_text.push(this.form.cn_text.split(eval(cn_regx)))
				this.split_uy_text.push(this.form.uy_text.split(eval(ug_regx)))
				/*filter*/
				this.split_cn_text = this.split_cn_text[0].filter(item => item )
				this.split_uy_text = this.split_uy_text[0].filter(item => item )
				this.dialogVisible = true;
			},
			add(){
				this.close()
				this.drawer = true;
			},
			close(){
				this.drawer = false;
				this.form.cn_text = '';
				this.form.uy_text = '';
				this.id = '';
				this.multipleSelection = []
			},
			submitForm(){
				if(!this.form.cn_text){
					this.$message({
					  message: '中文内容不能为空！',
					  type: 'error'
					});
					return false
				}
				if(!this.form.uy_text){
					this.$message({
					  message: '维吾尔文内容不能为空！',
					  type: 'error'
					});
					return false
				}
				article.add(this.form.cn_text, this.form.uy_text).then(res=>{
					this.close()
					setTimeout(()=>{
						this.getData()
					},300)
				});
			},
			
			update(){
				if(!this.form.cn_text){
					this.$message({
					  message: '中文内容不能为空！',
					  type: 'error'
					});
					return false
				}
				if(!this.form.uy_text){
					this.$message({
					  message: '维吾尔文内容不能为空！',
					  type: 'error'
					});
					return false
				}
				article.update(this.id, this.form.cn_text, this.form.uy_text).then(res=>{
					this.close()
					this.getData()
				});
			},
			getCount(){
				article.count(this.serach_cn, this.serach_uy).then(res=>{
					this.count = res;
				})
			}, 
			getData(){
				this.articleData = []
				article.getAll(this.page, this.limit, this.serach_cn, this.serach_uy).then((res)=>{
					// res 为数据库查询结果
					this.articleData = res
					this.articleData.forEach((i)=>{
						if(i.add_time){
							i.add_time =  uni.$u.timeFormat(i.add_time, 'yyyy-mm-dd hh:MM');
							i.update_time =  uni.$u.timeFormat(i.update_time, 'yyyy-mm-dd hh:MM');
						}
					})
					setTimeout(()=>{
						this.search_text()
					},400)
				})
			},
			del(index, rows){
				 this.$confirm('确认删除吗？')
				  .then(_ => {
					article.del(this.articleData[index]._id).then(res=>{
						if(res.deleted == 1){
							this.$message({
							  message: '删除成功',
							  type: 'success'
							});
							this.getData()
						}
					})
				  }).catch(_ => {});
			},
			current_change(page){
				this.page = page;
				this.getData();
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			search_start(){
				this.page = 1;
				this.change()
				this.getData()
				this.getCount();
			},
			change(){
				this.common(this.search_select)
			},
			common(lang){
				if(lang == 1){
					this.serach_cn = this.search
					this.serach_uy = ''
					this.cls = 'al-left'
					this.dir = ''
					this.placeholder = '请输入搜索内容'
				}else{
					this.serach_uy = this.search
					this.serach_cn = ''
					this.cls = 'al-right uy'
					this.dir = 'rtl_input'
					this.placeholder = 'ئىزدەيدىغان مەزمۇننى كىرگۈزۈڭ'
				}
				this.search_select = lang
			},
			blur(){
			  this.lianjiefu = "";
			  this.result1 = "";
			  let text = this.search.trim().substr(0,1);
			  let pattern_uy = /[\u0600-\u06ff]/; //维吾尔文
			  let pattern_zh = /[\u4e00-\u9fa5]/; //汉语
			  let pattern_en = /[A-Za-z]/; 	   //英文
			  if(pattern_uy.test(text)){//维吾尔文
				  this.common(2)
			  }
			  if(pattern_zh.test(text)){//汉语
				  this.common(1)
			  }
			  this.search = $.trim(this.search)
			  this.search_text()
			},
			search_text() {
				 $(".res").each(function () {//恢复原始数据
					$(this).replaceWith($(this).html());
				});
				let key = this.search;
				if(key){
					var regExp = new RegExp(key+'(?!([^<]+)?>)', 'ig');//正则表达式匹配
					$(".cell").each(function () {
					   $(this).html($(this).html().replace(regExp, "<span class='res' style='background-color: yellow;'>" + key + "</span>")); // 高亮操作
					})
				}
			},
			del_all(){
				if(this.multipleSelection.length < 1){
					this.$message({
					  message: '没有选中的信息！',
					  type: 'error'
					});
					return false;
				}
				this.$confirm('确认删除吗？')
				 .then(_ => {
					this.multipleSelection.forEach((i)=>{
						article.del(i._id)
					})
					setTimeout(()=>{
						this.$message({
						  message: '删除成功',
						  type: 'success'
						});
						this.getData()
					},500)
				 }).catch(_ => {});
				
			},
			edit(index, rows){
				let info = this.articleData[index];
				this.id = info._id;
				this.form.cn_text = info.cn_text
				this.form.uy_text = info.uy_text
				this.drawer = true;
			},
			setting_drawer(){
				this.setting = true
			},
			input_change(number){
				localStorage.setItem('fs', number)
			},
			logout(){
				localStorage.removeItem('audio')
				localStorage.removeItem('is_login');
				this.$message({
				  message: '退出成功',
				  type: 'success'
				});
				uni.redirectTo({
					url:'/pages/index/login/login'
				})
			},
			el_dialog_close(done){
				 this.$confirm('确认关闭？').then(_ => {done();}) 
			}
		
		}
	}
</script>

<style lang="scss">
	.el-radio{
		margin-right: 0!important;
	}
	.item{
		display: flex;
	}
	.el-form-item__content{
		margin-left: 40px!important;
	}
	.el-checkbox-group{
		transform: translateX(80px);
	}
	.el-footer{
		position: fixed;
		bottom: 0;
		right: 0;
		width: 100%;
		height: 50px;
		z-index: 10;
		 background-color: #fff;
		 direction: rtl;
	}
	.el-header{
		position: fixed;
		top: 0;
		right: 0;
		width: 100%;
		height: 50px;
		z-index: 10;
	}
	.el-header{
	    background-color: #fff;
	    color: #333;
	    text-align: right;
	    line-height: 60px;
	  }
	  
	  .el-aside {
	    background-color: #D3DCE6;
	    color: #333;
	    text-align: center;
	    line-height: 200px;
	  }
	  
	  .el-main {
		margin-top: 60px;
		margin-bottom: 70px;
	    background-color: #E9EEF3;
	    color: #333;
	    text-align: center;
		padding: 20px 0 0;
	  }
	  .result_res{
		  
	  }
</style>
